<template>
  <div>
   <el-row :gutter="15">
  <el-col :span="6"><div class="grid-content bg-purple-dark"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content row-bg"></div></el-col>
   <el-col :span="10"> <div id="main1" style="width: 600px;height:400px;margin-top:30px"></div></el-col>
  <el-col :span="6"> <div id="main" style="width: 600px;height:400px;margin-top:30px"></div></el-col>
 </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import anhui from '../../assets/map/anhui.json'
export default {

  mounted () {
    this.showchart()
    this.showmap()
  },
  methods: {
    showchart () {
      const myChart = echarts.init(document.getElementById('main1'))
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
      myChart.setOption(option)
    },

    showmap () {
      const anhuiJson = anhui
      const myChart = echarts.init(document.getElementById('main'))
      echarts.registerMap('anhui', anhuiJson)
      const option = {
        title: {
          text: '地图'
        },
        series: [
          {
            type: 'map',
            map: 'anhui'
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .bg-purple-dark {
    background: #8eb9f5;
  }
  .bg-purple {
    background: #e789e7;
  }
  .bg-purple-light {
    background: #7ff084;
  }
  .row-bg {
    background-color: #f5df7e;
  }
  .grid-content {
   width: 255px;
   height: 150px;
   border-radius: 10px;
  }
</style>
